<template>
  <div>
    <div class="first">
      <div class="box">
        <span>获证参建单位</span>
        <span style="margin-left: 24px;">324</span>
      </div>
      <div class="box">
        <span>无感监管对象</span>
        <span style="margin-left: 24px;">323</span>
      </div>
    </div>
    <div class="middle">
      <MyChart :options="option1" height="300px"></MyChart>
    </div>
    <div class="bottom">
      <div class="bottom-left">
        <MyChart :options="option2"  height="300px"></MyChart>
      </div>
      <div class="bottom-right">
        <MyChart :options="option3" height="300px"></MyChart>
      </div>
    </div>
  </div>

</template>
<script setup>
import MyChart from '@/components/MyEcharts/index.vue'
const option1 = reactive({
  name: '区域分布',
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'bar'
    }
  ]
})
const option2 = reactive({
  name:'行业分类',
  color: ['#18F6F8', '#288CFC', '#FFD91A'], // 配置各版块颜色
  legend: {
    top: '10px', // legend位置距离顶部10px
    icon: 'circle', // 将legend图标改为小圆点 // legend图标宽度
    itemWidth: 10, // legend图标宽度
    itemHeight: 10 // legend图标高度
  },
  tooltip: {
    confine: true,
    trigger: 'item',
    formatter: '{b} : {c}' // 鼠标hover时展示啥数据
  },
  series: [
    {
      avoidLabelOverlap: false,
      type: 'pie', // 图例类型：饼图
      roseType: 'area', // 玫瑰图
      center: ['50%', '50%'], // 图例在容器中的位置，第一个控制左右，第二个控制上下
      radius: ['20%', '60%'], // 20%：内部空白圆的直径，60%：外部圆环的直径
      label: {
        formatter: '{b}\n-------------\n{d}%\t{c}', // 自定义lable处展示那些数据及其格式
        fontSize: 16 // 字体大小
      },
      labelLine: {
        length: 20, // 挨着图例的直线的长度
        length2: 30 // 挨着文字的直线的长度
      },
      data: [
        // 图例数据，与右图对应
        {
          name: '大一',
          value: 2100
        },
        {
          name: '大二',
          value: 2502
        },
        {
          name: '大三',
          value: 3156
        }
      ]
    }
  ]


})
const option3 = reactive({
  name:'涉及计量器具',
  color: ['#18F6F8', '#288CFC', '#FFD91A'], // 配置各版块颜色
  legend: {
    top: '10px', // legend位置距离顶部10px
    icon: 'circle', // 将legend图标改为小圆点 // legend图标宽度
    itemWidth: 10, // legend图标宽度
    itemHeight: 10 // legend图标高度
  },
  tooltip: {
    confine: true,
    trigger: 'item',
    formatter: '{b} : {c}' // 鼠标hover时展示啥数据
  },
  series: [
    {
      avoidLabelOverlap: false,
      type: 'pie', // 图例类型：饼图
      roseType: 'area', // 玫瑰图
      center: ['50%', '50%'], // 图例在容器中的位置，第一个控制左右，第二个控制上下
      radius: ['20%', '60%'], // 20%：内部空白圆的直径，60%：外部圆环的直径
      label: {
        formatter: '{b}\n-------------\n{d}%\t{c}', // 自定义lable处展示那些数据及其格式
        fontSize: 16 // 字体大小
      },
      labelLine: {
        length: 20, // 挨着图例的直线的长度
        length2: 30 // 挨着文字的直线的长度
      },
      data: [
        // 图例数据，与右图对应
        {
          name: '大一',
          value: 2100
        },
        {
          name: '大二',
          value: 2502
        },
        {
          name: '大三',
          value: 3156
        }
      ]
    }
  ]
})
</script>
<style lang="scss" scoped>
.first {
  display: flex;
  width: 100%;

  .box {
    background-color: #4688F6;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
    width: 47%;
    height: 50px;
    border-radius: 5px;
  }

  .box:first-child {
    margin-right: 24px;
  }
}

.middle,
.bottom {
  background-color: white;
  margin-top: 12px;
}

.bottom {
  display: flex;
}

.bottom-left {
  margin-right: 12px;
  width: 50%;
}

.bottom-right {
  width: 50%;
}
</style>
